<template>
	<div class="home-preview">




		<!-- 特价商品 -->
		<div id="animate_listshebeixinxi" class="lists animate__animated">
			<div class="list_title_box">
				<span class="list_title">设备信息展示</span>
				<span class="list_subhead">{{'shebeixinxi'.toUpperCase()}} SHOW</span>
			</div>
			<!-- 样式六 -->
			<div class="list list6 index-pv1">
				<div class="list-body-left">
					<div v-if="shebeixinxiList.length>0" @click="toDetail('shebeixinxiDetail', shebeixinxiList[0])" class="list-item1 animation-box">
						<img v-if="preHttp(shebeixinxiList[0].shebeitupian)" :src="shebeixinxiList[0].shebeitupian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl + (shebeixinxiList[0].shebeitupian?shebeixinxiList[0].shebeitupian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{shebeixinxiList[0].shebeimingcheng}}</div>
							<div class="name">{{shebeixinxiList[0].shebeileixing}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{shebeixinxiList[0].addtime.split(' ')[0]}}</span>
							</div>
							<div class="publisher_item">
								<span class="icon iconfont icon-geren16"></span>
								<span class="label">发布人：</span>
								<span class="text">{{shebeixinxiList[0].gonghao}}</span>
							</div>
							<div class="collect_item">
								<span class="icon iconfont icon-shoucang11"></span>
								<span class="label">收藏量：</span>
								<span class="text">{{shebeixinxiList[0].storeupnum}}</span>
							</div>
						</div>
					</div>
					<div v-if="shebeixinxiList.length>1" @click="toDetail('shebeixinxiDetail', shebeixinxiList[1])" class="list-item2 animation-box">
						<img v-if="preHttp(shebeixinxiList[1].shebeitupian)" :src="shebeixinxiList[1].shebeitupian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl +  (shebeixinxiList[1].shebeitupian?shebeixinxiList[1].shebeitupian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{shebeixinxiList[1].shebeimingcheng}}</div>
							<div class="name">{{shebeixinxiList[1].shebeileixing}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{shebeixinxiList[1].addtime.split(' ')[0]}}</span>
							</div>
							<div class="publisher_item">
								<span class="icon iconfont icon-geren16"></span>
								<span class="label">发布人：</span>
								<span class="text">{{shebeixinxiList[1].gonghao}}</span>
							</div>
							<div class="collect_item">
								<span class="icon iconfont icon-shoucang11"></span>
								<span class="label">收藏量：</span>
								<span class="text">{{shebeixinxiList[1].storeupnum}}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-if="shebeixinxiList.length>2" class="list-item3 animation-box" @click="toDetail('shebeixinxiDetail', shebeixinxiList[2])">
					<img v-if="preHttp(shebeixinxiList[2].shebeitupian)" :src="shebeixinxiList[2].shebeitupian.split(',')[0]" alt="" />
					<img v-else :src="baseUrl + (shebeixinxiList[2].shebeitupian?shebeixinxiList[2].shebeitupian.split(',')[0]:'')" alt="" />
					<div class="infoBox">
						<div class="name">{{shebeixinxiList[2].shebeimingcheng}}</div>
						<div class="name">{{shebeixinxiList[2].shebeileixing}}</div>
						<div class="time_item">
							<span class="icon iconfont icon-shijian21"></span>
							<span class="label">发布时间：</span>
							<span class="text">{{shebeixinxiList[2].addtime.split(' ')[0]}}</span>
						</div>
						<div class="publisher_item">
							<span class="icon iconfont icon-geren16"></span>
							<span class="label">发布人：</span>
							<span class="text">{{shebeixinxiList[2].gonghao}}</span>
						</div>
						<div class="collect_item">
							<span class="icon iconfont icon-shoucang11"></span>
							<span class="label">收藏量：</span>
							<span class="text">{{shebeixinxiList[2].storeupnum}}</span>
						</div>
					</div>
				</div>
				<div class="list-body-right">
					<div v-if="shebeixinxiList.length>3" @click="toDetail('shebeixinxiDetail', shebeixinxiList[3])" class="list-item1 animation-box">
						<img v-if="preHttp(shebeixinxiList[3].shebeitupian)" :src="shebeixinxiList[3].shebeitupian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl +  (shebeixinxiList[3].shebeitupian?shebeixinxiList[3].shebeitupian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{shebeixinxiList[3].shebeimingcheng}}</div>
							<div class="name">{{shebeixinxiList[3].shebeileixing}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{shebeixinxiList[3].addtime.split(' ')[0]}}</span>
							</div>
							<div class="publisher_item">
								<span class="icon iconfont icon-geren16"></span>
								<span class="label">发布人：</span>
								<span class="text">{{shebeixinxiList[3].gonghao}}</span>
							</div>
							<div class="collect_item">
								<span class="icon iconfont icon-shoucang11"></span>
								<span class="label">收藏量：</span>
								<span class="text">{{shebeixinxiList[3].storeupnum}}</span>
							</div>
						</div>
					</div>
					<div v-if="shebeixinxiList.length>4" @click="toDetail('shebeixinxiDetail', shebeixinxiList[4])" class="list-item2 animation-box">
						<img v-if="preHttp(shebeixinxiList[4].shebeitupian)" :src="shebeixinxiList[4].shebeitupian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl + (shebeixinxiList[4].shebeitupian?shebeixinxiList[4].shebeitupian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{shebeixinxiList[4].shebeimingcheng}}</div>
							<div class="name">{{shebeixinxiList[4].shebeileixing}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{shebeixinxiList[4].addtime.split(' ')[0]}}</span>
							</div>
							<div class="publisher_item">
								<span class="icon iconfont icon-geren16"></span>
								<span class="label">发布人：</span>
								<span class="text">{{shebeixinxiList[4].gonghao}}</span>
							</div>
							<div class="collect_item">
								<span class="icon iconfont icon-shoucang11"></span>
								<span class="label">收藏量：</span>
								<span class="text">{{shebeixinxiList[4].storeupnum}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moreBtn" @click="moreBtn('shebeixinxi')">
				<span class="text">查看更多</span>
				<i class="icon iconfont icon-gengduo1"></i>
			</div>
	

		</div>
		<!-- 特价商品 -->
		<!-- 特价商品 -->
		<div id="animate_listgonggaoxinxi" class="lists animate__animated">
			<div class="list_title_box">
				<span class="list_title">公告信息展示</span>
				<span class="list_subhead">{{'gonggaoxinxi'.toUpperCase()}} SHOW</span>
			</div>
			<!-- 样式六 -->
			<div class="list list6 index-pv1">
				<div class="list-body-left">
					<div v-if="gonggaoxinxiList.length>0" @click="toDetail('gonggaoxinxiDetail', gonggaoxinxiList[0])" class="list-item1 animation-box">
						<img v-if="preHttp(gonggaoxinxiList[0].fengmian)" :src="gonggaoxinxiList[0].fengmian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl + (gonggaoxinxiList[0].fengmian?gonggaoxinxiList[0].fengmian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{gonggaoxinxiList[0].biaoti}}</div>
							<div class="name">{{gonggaoxinxiList[0].fabushijian}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{gonggaoxinxiList[0].addtime.split(' ')[0]}}</span>
							</div>
						</div>
					</div>
					<div v-if="gonggaoxinxiList.length>1" @click="toDetail('gonggaoxinxiDetail', gonggaoxinxiList[1])" class="list-item2 animation-box">
						<img v-if="preHttp(gonggaoxinxiList[1].fengmian)" :src="gonggaoxinxiList[1].fengmian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl +  (gonggaoxinxiList[1].fengmian?gonggaoxinxiList[1].fengmian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{gonggaoxinxiList[1].biaoti}}</div>
							<div class="name">{{gonggaoxinxiList[1].fabushijian}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{gonggaoxinxiList[1].addtime.split(' ')[0]}}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-if="gonggaoxinxiList.length>2" class="list-item3 animation-box" @click="toDetail('gonggaoxinxiDetail', gonggaoxinxiList[2])">
					<img v-if="preHttp(gonggaoxinxiList[2].fengmian)" :src="gonggaoxinxiList[2].fengmian.split(',')[0]" alt="" />
					<img v-else :src="baseUrl + (gonggaoxinxiList[2].fengmian?gonggaoxinxiList[2].fengmian.split(',')[0]:'')" alt="" />
					<div class="infoBox">
						<div class="name">{{gonggaoxinxiList[2].biaoti}}</div>
						<div class="name">{{gonggaoxinxiList[2].fabushijian}}</div>
						<div class="time_item">
							<span class="icon iconfont icon-shijian21"></span>
							<span class="label">发布时间：</span>
							<span class="text">{{gonggaoxinxiList[2].addtime.split(' ')[0]}}</span>
						</div>
					</div>
				</div>
				<div class="list-body-right">
					<div v-if="gonggaoxinxiList.length>3" @click="toDetail('gonggaoxinxiDetail', gonggaoxinxiList[3])" class="list-item1 animation-box">
						<img v-if="preHttp(gonggaoxinxiList[3].fengmian)" :src="gonggaoxinxiList[3].fengmian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl +  (gonggaoxinxiList[3].fengmian?gonggaoxinxiList[3].fengmian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{gonggaoxinxiList[3].biaoti}}</div>
							<div class="name">{{gonggaoxinxiList[3].fabushijian}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{gonggaoxinxiList[3].addtime.split(' ')[0]}}</span>
							</div>
						</div>
					</div>
					<div v-if="gonggaoxinxiList.length>4" @click="toDetail('gonggaoxinxiDetail', gonggaoxinxiList[4])" class="list-item2 animation-box">
						<img v-if="preHttp(gonggaoxinxiList[4].fengmian)" :src="gonggaoxinxiList[4].fengmian.split(',')[0]" alt="" />
						<img v-else :src="baseUrl + (gonggaoxinxiList[4].fengmian?gonggaoxinxiList[4].fengmian.split(',')[0]:'')" alt="" />
						<div class="infoBox">
							<div class="name">{{gonggaoxinxiList[4].biaoti}}</div>
							<div class="name">{{gonggaoxinxiList[4].fabushijian}}</div>
							<div class="time_item">
								<span class="icon iconfont icon-shijian21"></span>
								<span class="label">发布时间：</span>
								<span class="text">{{gonggaoxinxiList[4].addtime.split(' ')[0]}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moreBtn" @click="moreBtn('gonggaoxinxi')">
				<span class="text">查看更多</span>
				<i class="icon iconfont icon-gengduo1"></i>
			</div>
	

		</div>
		<!-- 特价商品 -->
	</div>
</template>

<script>
import 'animate.css'
import Swiper from "swiper";

	export default {
		//数据集合
		data() {
			return {
				baseUrl: '',
				newsList: [],

				shebeixinxiList: [],
				gonggaoxinxiList: [],




			}
		},
		created() {
			this.baseUrl = this.$config.baseUrl;
			this.getList();
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			setTimeout(()=>{
				this.handleScroll()
			},100)
			
			this.swiperChanges()
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.handleScroll)
		},
		//方法集合
		methods: {
			swiperChanges() {
				setTimeout(()=>{
				},750)
			},


			handleScroll() {
				let arr = [
					{id:'about',css:'animate__bounce'},
					{id:'system',css:'animate__bounce'},
					{id:'animate_listshebeixinxi',css:'animate__bounce'},
					{id:'animate_listgonggaoxinxi',css:'animate__bounce'},
				]
			
				for (let i in arr) {
					let doc = document.getElementById(arr[i].id)
					if (doc) {
						let top = doc.offsetTop
						let win_top = window.innerHeight + window.pageYOffset
						// console.log(top,win_top)
						if (win_top > top && doc.classList.value.indexOf(arr[i].css) < 0) {
							// console.log(doc)
							doc.classList.add(arr[i].css)
						}
					}
				}
			},
			preHttp(str) {
				return str && str.substr(0,4)=='http';
			},
			preHttp2(str) {
				return str && str.split(',w').length>1;
			},
			getList() {
				let autoSortUrl = "";
				let data = {}
			
				data = {
					page: 1,
					limit: 6,
				}

				this.$http.get('shebeixinxi/list', {params: data}).then(res => {
					if (res.data.code == 0) {
						this.shebeixinxiList = res.data.data.list;
					}
				});
				data = {
					page: 1,
					limit: 6,
				}

				this.$http.get('gonggaoxinxi/list', {params: data}).then(res => {
					if (res.data.code == 0) {
						this.gonggaoxinxiList = res.data.data.list;
					}
				});
			},
			toDetail(path, item) {
				this.$router.push({path: '/index/' + path, query: {id: item.id}});
			},
			moreBtn(path) {
				this.$router.push({path: '/index/' + path});
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.home-preview {
		margin: 10px auto;
		flex-direction: column;
		display: flex;
		width: 100%;
		.lists {
			padding: 30px 16%;
			margin: 0;
			background: #fff;
			border-color: #C4C4C4;
			border-width: 0 0 1px;
			position: relative;
			border-style: solid;
			order: 4;
			.list_title_box {
				padding: 0 0 0 40px;
				margin: 0 0 0 16%;
			/*	background: url(http://codegen.caihongy.cn/20250121/fd7c2d7b9f634bbebcb0a397964345cf.png) center center/100% 100%;*/
				display: flex;
				width: 400px;
				line-height: 1;
				flex-wrap: wrap;
				text-align: left;
				.list_title {
					color: #000;
					font-weight: bold;
					width: 100%;
					font-size: 24px;
					order: 1;
				}
				.list_subhead {
					margin: 0 0 5px;
					color: #4450ce;
					font-weight: bold;
					width: 100%;
					font-size: 16px;
					line-height: 1.5;
					text-align: left;
				}
			}
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
			
			.index-pv1 .animation-box:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
			
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 10px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
			.list6 {
				padding: 30px 0;
				background: #fff;
				display: flex;
				width: 100%;
				height: auto;
				.list-body-left {
					margin: 0;
					width: 33%;
					height: auto;
					.list-item1 {
						margin: 0 0 20px;
						width: 100%;
						position: relative;
						height: 320px;
						img {
							object-fit: cover;
							width: 100%;
							float: left;
							height: 100%;
						}
						.infoBox {
							padding: 10px 30px;
							left: 0;
							bottom: 0;
							background: rgba(44, 54, 87,0.9);
							display: flex;
							width: 100%;
							position: absolute;
							flex-wrap: wrap;
							.name {
								padding: 0 10px;
								color: #fff;
								width: 100%;
								font-size: 18px;
								line-height: 44px;
							}
							.price {
								padding: 0;
								color: #C13800;
								bottom: 10px;
								font-size: 16px;
								line-height: 40px;
								position: absolute;
								right: 30px;
							}
							.time_item {
								padding: 0 10px;
								width: 100%;
								order: 1;
								.icon {
									margin: 0 5px 0 0;
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.publisher_item {
								padding: 0 10px;
								order: 2;
								.icon {
									margin: 0 5px 0 0;
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.like_item {
								padding: 0 10px;
								order: 3;
								.icon {
									margin: 0 5px 0 0;
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.collect_item {
								padding: 0 10px;
								order: 4;
								.icon {
									margin: 0 5px 0 0;
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.view_item {
								padding: 0 10px;
								order: 5;
								.icon {
									margin: 0 5px 0 0;
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
							}
						}
					}
					.list-item2 {
						margin: 0 0 20px;
						width: 100%;
						position: relative;
						height: 320px;
						img {
							object-fit: cover;
							width: 100%;
							float: left;
							height: 100%;
						}
						.infoBox {
							padding: 10px 30px;
							left: 0;
							bottom: 0;
							background: #a4b3f6;
							display: flex;
							width: 100%;
							position: absolute;
							flex-wrap: wrap;
							.name {
								padding: 0 10px;
								color: #fff;
								width: 100%;
								font-size: 18px;
								line-height: 44px;
							}
							.price {
								padding: 0;
								color: #C13800;
								bottom: 10px;
								font-size: 16px;
								line-height: 40px;
								position: absolute;
								right: 30px;
							}
							.time_item {
								padding: 0 10px;
								width: 100%;
								order: 1;
								.icon {
									margin: 0 5px 0 0;
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.publisher_item {
								padding: 0 10px;
								order: 2;
								.icon {
									margin: 0 5px 0 0;
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.like_item {
								padding: 0 10px;
								order: 3;
								.icon {
									margin: 0 5px 0 0;
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.collect_item {
								padding: 0 10px;
								order: 4;
								.icon {
									margin: 0 5px 0 0;
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.view_item {
								padding: 0 10px;
								order: 5;
								.icon {
									margin: 0 5px 0 0;
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
							}
						}
					}
				}
				.list-item3 {
					margin: 0 auto;
					width: 33%;
					position: relative;
					height: 660px;
					img {
						object-fit: cover;
						width: 100%;
						float: left;
						height: 100%;
					}
					.infoBox {
						padding: 10px 30px;
						left: 0;
						bottom: 0;
						background: #a4b3f6;
						display: flex;
						width: 100%;
						position: absolute;
						flex-wrap: wrap;
						.name {
							padding: 0 10px;
							color: #fff;
							width: 100%;
							font-size: 18px;
							line-height: 44px;
						}
						.price {
							padding: 0;
							color: #C13800;
							bottom: 10px;
							font-size: 16px;
							line-height: 40px;
							position: absolute;
							right: 30px;
						}
						.time_item {
							padding: 0 10px;
							width: 100%;
							order: 1;
							.icon {
								margin: 0 5px 0 0;
								color: #788DD0;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #788DD0;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.publisher_item {
							padding: 0 10px;
							order: 2;
							.icon {
								margin: 0 5px 0 0;
								color: #9BD5DE;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #9BD5DE;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.like_item {
							padding: 0 10px;
							order: 3;
							.icon {
								margin: 0 5px 0 0;
								color: #FFC5F5;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #FFC5F5;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.collect_item {
							padding: 0 10px;
							order: 4;
							.icon {
								margin: 0 5px 0 0;
								color: #FFF3BB;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #FFF3BB;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.view_item {
							padding: 0 10px;
							order: 5;
							.icon {
								margin: 0 5px 0 0;
								color: #E9F3FF;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #E9F3FF;
								font-size: 14px;
								line-height: 25px;
							}
						}
					}
				}
				.list-body-right {
					margin: 0;
					width: 33%;
					height: auto;
					.list-item1 {
						margin: 0 0 20px;
						width: 100%;
						position: relative;
						height: 320px;
						img {
							object-fit: cover;
							width: 100%;
							float: left;
							height: 100%;
						}
						.infoBox {
							padding: 10px 30px;
							left: 0;
							bottom: 0;
							background: #a4b3f6;
							display: flex;
							width: 100%;
							position: absolute;
							flex-wrap: wrap;
							.name {
								padding: 0 10px;
								color: #fff;
								width: 100%;
								font-size: 18px;
								line-height: 44px;
							}
							.price {
								padding: 0;
								color: #C13800;
								bottom: 10px;
								font-size: 16px;
								line-height: 40px;
								position: absolute;
								right: 30px;
							}
							.time_item {
								padding: 0 10px;
								width: 100%;
								order: 1;
								.icon {
									margin: 0 5px 0 0;
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.publisher_item {
								padding: 0 10px;
								order: 2;
								.icon {
									margin: 0 5px 0 0;
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.like_item {
								padding: 0 10px;
								order: 3;
								.icon {
									margin: 0 5px 0 0;
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.collect_item {
								padding: 0 10px;
								order: 4;
								.icon {
									margin: 0 5px 0 0;
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.view_item {
								padding: 0 10px;
								order: 5;
								.icon {
									margin: 0 5px 0 0;
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
							}
						}
					}
					.list-item2 {
						margin: 0 0 20px;
						width: 100%;
						position: relative;
						height: 320px;
						img {
							object-fit: cover;
							width: 100%;
							float: left;
							height: 100%;
						}
						.infoBox {
							padding: 10px 30px;
							left: 0;
							bottom: 0;
							background: #a4b3f6;
							display: flex;
							width: 100%;
							position: absolute;
							flex-wrap: wrap;
							.name {
								padding: 0 10px;
								color: #fff;
								width: 100%;
								font-size: 18px;
								line-height: 44px;
							}
							.price {
								padding: 0;
								color: #C13800;
								bottom: 10px;
								font-size: 16px;
								line-height: 40px;
								position: absolute;
								right: 30px;
							}
							.time_item {
								padding: 0 10px;
								width: 100%;
								order: 1;
								.icon {
									margin: 0 5px 0 0;
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #788DD0;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.publisher_item {
								padding: 0 10px;
								order: 2;
								.icon {
									margin: 0 5px 0 0;
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #9BD5DE;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.like_item {
								padding: 0 10px;
								order: 3;
								.icon {
									margin: 0 5px 0 0;
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFC5F5;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.collect_item {
								padding: 0 10px;
								order: 4;
								.icon {
									margin: 0 5px 0 0;
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #FFF3BB;
									font-size: 14px;
									line-height: 25px;
								}
							}
							.view_item {
								padding: 0 10px;
								order: 5;
								.icon {
									margin: 0 5px 0 0;
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
								.label {
									color: #666;
									display: none;
									font-size: 12px;
									line-height: 1.5;
								}
								.text {
									color: #E9F3FF;
									font-size: 14px;
									line-height: 25px;
								}
							}
						}
					}
				}
			}
			.moreBtn {
				border: 0;
				margin: 10px auto;
				top: 20px;
        /*
				background: url(http://codegen.caihongy.cn/20250121/5944d798f2cb4e689b7839b8dfd1f945.png) bottom left/100% no-repeat;
        */
				display: block;
				width: 150px;
				line-height: 50px;
				position: absolute;
				right: 16%;
				text-align: center;
				.text {
					color: #000;
					font-weight: bold;
					font-size: 14px;
				}
				.icon {
					color: #f5f5f5;
					display: none;
					font-size: 12px;
				}
			}
		}
	}
</style>
